<template>
    <div id="result">
        <div class="SearchPage">
            <div class="SearchPage-header">
                <input class="SearchPage-headerInput" type="text" v-model="value" placeholder="搜索/主播/分类">
                <div class="SearchPage-headerSearch" @click="resultes">搜索</div>
            </div>
        </div>

        <!-- 导航 -->
        <div class="SearchResult-header">
            <!-- 全部 直播 主播 -->
            <div class="fi">
                <div class="SearchResult-headerNav">

                    <div class="SearchResult-headerNavItem" v-for="(item,index) in title" :key="index"
                        @click="all(index+1)" :class="[index==num?'active':'']">{{item}}
                    </div>

                    <!-- <div class="SearchResult-headerNavItem" @click="live(2)">{{title[1]}}</div>
                    <div class="SearchResult-headerNavItem" @click="live(3)">{{title[2]}}</div> -->
                </div>
                <!-- 相关度 -->
                <div class="SearchResult-headerSort">
                    <div class="SearchResult-headerSortVal" @click="show">
                        <span class="SearchResult-headerSortValName">相关度</span>
                        <i class="SearchResult-headerSortValIcon"></i>
                    </div>

                    <div class="SearchResult-headerSortOptions" :style="{'display':showw}">
                        <div class="SearchResult-headerSortOptionsItem">相关度</div>
                        <div class="SearchResult-headerSortOptionsItem">热度值</div>
                        <div class="SearchResult-headerSortOptionsItem">关注量</div>
                    </div>
                </div>
            </div>  
            <router-view :key="$route.fullPath"></router-view>
        </div>
    </div>
   
</template>
<script>
    import { mapMutations, mapGetters } from 'vuex'
    export default {
        name: 'result',
        data() {
            return {
                value: '',
                valuet: '',
                showw: 'none',
                title: ['全部', '直播', '主播'],
                index: 1,
                num: ''
            }
        },
        created: function () {
            //登录添加键盘事件,注意,不能直接在焦点事件上添加回车
        },
        created() {
            // vuex取值 移动端没有刷新按钮
            this.valuet = this.$route.query.zive
            this.value = this.$route.query.zive
            this.keyword = this.$route.query.keyword
            // 键盘事件
            var _this = this;
            document.onkeydown = function (e) {
                let key = window.event.keyCode;
                if (key == 13) {
                    _this.resultes()
                }
            };
        },
        methods: {
            // 点击全部
            all(index) {
                // vuex赋值 移动端没有刷新按钮
                this.num = index - 1
                if (index == 1) {
                    this.$router.push({
                        path: '/result/streaming',
                        query: {
                            index: index,
                            zive: this.valuet
                        }
                    })
                } else if (index == 2) {
                    this.$router.push({
                        path: '/result/entire',
                        query: {
                            index: index,
                            zive: this.valuet
                        }
                    })
                } else if (index == 3) {
                    this.$router.push({
                        path: '/result/anchor',
                        query: {
                            index: index,
                            zive: this.valuet
                        }
                    })
                }
            },
            // 点击显示
            show() {
                if (this.showw == 'none') {
                    this.showw = 'block'
                } else {
                    this.showw = 'none'
                }
            },
            resultes() {
                this.valuet = this.value
                this.all(1)
            },
        },
    }
</script>
<style scoped>
    .active {
        color: #ff6d00;
    }

    .SearchPage {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
    }

    .fi {
        width: 100%;
        position: fixed;
        margin-top: 40px;
        z-index: 999;
        background-color: #fff;

    }

    .SearchPage-header {
        width: 100%;
        box-sizing: border-box;
        position: relative;
        padding: 7px 60px 0 10px;
        height: 44px;
        background-color: #fff;
        border-bottom: 1px solid #eee;

    }

    .SearchResultAllAnchor-showItemLive {
        position: absolute;
        left: 0;
        top: 0;
        width: 56px;
        height: 16px;
        background-image: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/playing_9f3b01a.png);
        background-repeat: no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }

    .SearchPage-headerInput {
        padding: 0 10px;
        margin: 0;
        height: 30px;
        line-height: 1.15;
        font-size: 14px;
        color: #333;
        outline: none;
        border: none;
        background-color: #f8f8f8;
        box-sizing: border-box;
        width: 100%;
        z-index: 33;
    }

    .SearchPage-headerSearch {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: 60px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 15px;
        color: #333;
    }

    /* 导航 */
    .SearchResult-header {
        position: relative;
        width: 100%;
        height: 40px;
        background: #fff;
        border-bottom: 1px solid #eee;

    }

    .SearchResult-headerNav {
        width: 75%;
        height: 100%;
        border-right: 1px solid #eee;
        overflow: hidden;
    }

    .SearchResult-header .SearchResult-headerNav .SearchResult-headerNavItem {
        float: left;
        width: 33.33333%;
        height: 100%;
        text-align: center;
        line-height: 40px;
        font-size: 14px;
        /* color: #333; */
    }

    .SearchResult-headerSort {
        position: absolute;
        top: 0;
        right: 0;
        width: 25%;
        height: 100%;
    }

    .select {
        color: #ff6d00;
    }

    /* 相关度 */
    .SearchResult-headerSortVal {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%;
        text-align: center;
    }

    .SearchResult-headerSortValName {
        display: block;
        line-height: 1.15;
        font-size: 14px;
        color: #333;
    }

    .SearchResult-headerSortValIcon {
        display: block;
        margin-left: 5px;
        width: 5.5px;
        height: 3px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/icon-down_f3a8eb3.png) no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }

    .SearchResult-headerSortOptions {
        /* display: none;
        display: block; */
        position: absolute;
        top: 27px;
        right: 0;
        z-index: 12;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 15px;
        width: 105px;
        height: 148.5px;
        background: url(https://shark2.douyucdn.cn/front-publish/m-douyu-v3-master/assets/images/selectdown_53e014f.png) no-repeat;
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }

    .SearchResult-headerSortOptionsItem {
        width: 100%;
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 14px;
        color: #333;
    }
</style>